<template>
  <div>
    <el-drawer
      title="充值详细"
      :visible="recentChargeDialog"
      direction="rtl"
      size="60%"
      custom-class="add-drawer"
      ref="drawer"
      :before-close="handleClose"
    >
      <div class="demo-drawer__content">
        <el-table :data="list" v-loading="loading" border>
          <el-table-column
            label="订单号"
            prop="orderNo"
            align="left"
            width="200"
          />
          <el-table-column
            label="电子卡类型"
            prop="cardOilsType"
            align="left"
            :formatter="cardOilsTypeFormat"
          />
          <el-table-column
            label="充值方式"
            prop="payType"
            align="left"
            :formatter="payTypeFotmat"
          />
          <el-table-column label="充值金额(元)" prop="amt" align="left" />
          <el-table-column
            label="充值后余额(元)"
            prop="balance"
            align="left"
          />
          <el-table-column
            label="支付完成时间"
            prop="createTime"
            width="160px"
            align="left"
          >
          </el-table-column>
        </el-table>

        <pagination
          v-show="list.length > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <el-button
          type="primary"
          size="medium"
          style="float: right; margin-top: 20px"
          @click="handleClose"
          >返回</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { getRecentChargeListApi } from "@/api/coupon";
export default {
  name: "Coupon_Grant_recentCharge",
  props: {
    recentChargeDialog: {
      type: Boolean,
      default: false,
    },
    currentRowDataInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        usageType: "+",
      },
      loading: false,
    };
  },
  watch: {
    recentChargeDialog(val) {
      if (val) {
        console.log(this.currentRowDataInfo);
        this.getList();
      }
    },
  },
  methods: {
    // formatterTime(row) {
    //   return parseTime(row.payDate, "{y}-{m}-{d} {h}:{i}:{s}");
    // },
    async getList() {
      this.loading = true;
      const params = { ...this.queryParams };
      params.mobilePhone = this.currentRowDataInfo.phone;
      const res = await getRecentChargeListApi(params);
      this.total = res.total;
      this.list = res.rows;
      this.loading = false;
    },
    handleClose() {
      this.$emit("update:recentChargeDialog", false);
    },
    payTypeFotmat(row) {
      const types = {
        imp: "手动增加",
        msub: "手动扣减",
        wx: "微信充值",
        ref: "充值退款",
      };
      return types[row.payType];
    },
    cardOilsTypeFormat(row) {
      const types = {
        1: "汽油卡",
        2: "柴油卡",
        3: "LNG卡",
        4: "CNG卡",
      };
      return types[row.cardOilsType];
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .add-drawer {
  overflow-y: auto;
  .el-drawer__header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
  .el-drawer__body {
    padding: 10px;
  }
}
</style>
